<template>
	<div v-if="studentInfo" >
		<div style="width: 100%; height: 10px;"></div>
		<span style="font-weight:bold;color:black">人物画像</span>
		<div style="width: 100%; height: 10px;"></div>
		<v-chart class="chart" :option="option" autoresize />
	</div>
</template>

<script setup>
import { use } from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { ref, watchEffect } from "vue";
import axios from 'axios'; // 导入 axios
import VChart from "vue-echarts";

use([
	TitleComponent,
	LegendComponent,
	RadarChart,
	CanvasRenderer,
	TooltipComponent,
	PieChart,
]);


// 定义 StuId 属性，并将其作为 props
const props = defineProps({
  StuId: String
});

// 使用 ref 创建响应式变量
const studentInfo = ref(null);
const diversity = ref(0);
const persistence = ref(0);
const vitality = ref(0);
const score_point = ref(0);

// 将 StuId 赋值给 studentId
const studentId = props.StuId;
console.log('This is Id in StuPortrait:',studentId);
// 发送请求获取学生信息

axios.get(`http://localhost:8080/Stu/StuMore?studentId=${studentId}`)
	.then(response => {
		console.log('StuMore 请求成功：', response);
		// 请求成功，更新学生信息
		studentInfo.value = response.data;
		console.log(studentInfo.value);

		diversity.value = parseInt(studentInfo.value.joinedCourseNum) + parseInt(studentInfo.value.joinedCourseSetNum);
		persistence.value = parseInt(studentInfo.value.joinedCourseNum) -
			parseInt(studentInfo.value.exitCourseNum) - parseInt(studentInfo.value.exitCourseSetNum);
		vitality.value = parseInt(studentInfo.value.vitality) / (360 * 24 * 31);
		score_point.value = 30;

		console.log(diversity.value);
		console.log(persistence.value);
		console.log(vitality.value);
		console.log(score_point.value);
	})
	.catch(error => {
		// 请求失败，处理错误
		console.error('请求失败：', error);
	});

const option = ref({
	tooltip: {
		trigger: 'item',
	},
	legend: {
		top: '5%',
		left: 'center',
		textStyle: { color: 'black' }
	},
	series: [
		{
			name: 'STU_85604',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['50%', '70%'],
			// adjust the start and end angle
			startAngle: 180,
			endAngle: 360,
			minShowLabelAngle: 3,
			data: [],
		}
	],
});

// 监听响应式变量的变化，并更新 option 对象中的数据
watchEffect(() => {
	option.value.series[0].data = [
		{ value: diversity.value, name: '多样性' },
		{ value: persistence.value*10, name: '坚持力' },
		{ value: persistence.value*20, name: '勤奋度' },
		{ value: vitality.value/200, name: '活跃度' },
		{ value: score_point.value, name: '能力值' }
	];
});
</script>

<style scoped>
.chart {
	width: 100%;
	height: 400px;
}
</style>
